<template>
  <div>
    <h2>Select 选择器</h2>
    <p>当选项过多时，使用下拉菜单展示并选择内容。</p>
    <div class="demo-block">
      <div class="demo-block-content">
        <div class="demo-block-content-row">
          <az-select v-model="data1">
            <az-option v-for="item in option1" :label="item.label" :value="item.value"></az-option>
          </az-select>
          <p>选择的值：{{ data1 }}</p>
        </div>
      </div>
      <div class="demo-block-code">
        <pre><code class="language-html"></code></pre>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
const data1 = ref('')
const option1 = [{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' },
{ label: '选项4', value: '4' },
{ label: '选项5', value: '5' },
{ label: '选项6', value: '6' },
{ label: '选项7', value: '7' }]
</script>

<style scoped></style>